<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        :root {
            --navheight: 35px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .wrapper {
            height: var(--navheight);
            line-height: var(--navheight);
            border-radius: var(--navheight);
            width: 30vw;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
            overflow: hidden;
        }
        .wrapper nav {
            position: relative;
            display: flex;
        }
        .wrapper nav label {
            flex: 1;
            z-index: 2;
            text-align: center;
        }
        .wrapper nav label span {
            margin: 0 3px;
        }
        .wrapper nav a {
            text-decoration: none;
            color: #666;
            pointer-events: none;
            transition: 0.6;
        }
        .wrapper nav .tab {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 20%;
            background-image: linear-gradient(45deg, #fc6067 0%, #ff9a44 100%);
            border-radius: var(--navheight);
            transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        .wrapper nav input {
            display: none;
        }
        #home:checked ~ label.home a,
        #user:checked ~ label.user a,
        #bell:checked ~ label.bell a,
        #star:checked ~ label.star a,
        #pencil:checked ~ label.pencil a {
            color: #fff;
        }
        #home:checked ~ .tab { left: 0%; }
        #user:checked ~ .tab { left: 20%; }
        #bell:checked ~ .tab { left: 40%; }
        #star:checked ~ .tab { left: 60%; }
        #pencil:checked ~ .tab { left: 80%; }
    </style>
</head>
<body>
    <header class="wrapper">
        <nav>
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="user">
            <input type="radio" name="tab" id="bell">
            <input type="radio" name="tab" id="star">
            <input type="radio" name="tab" id="pencil">
            <div class="tab"></div>
            <label for="home" class="home"><a href="javascript:void(0);"><span class="iconfont icon-home"></span>首页</a></label>
            <label for="user" class="user"><a href="javascript:void(0);"><span class="iconfont icon-user"></span>用户</a></label>
            <label for="bell" class="bell"><a href="javascript:void(0);"><span class="iconfont icon-bell"></span>消息</a></label>
            <label for="star" class="star"><a href="javascript:void(0);"><span class="iconfont icon-star"></span>收藏</a></label>
            <label for="pencil" class="pencil"><a href="javascript:void(0);"><span class="iconfont icon-pencil"></span>创作</a></label>
        </nav>
    </header>
</body>
</html>